<template>
  <div class="app-container search-list">
    <table-pagination
        ref="el-search-table"
        :adaptive="fixOption"
        :columns="columns"
        :fetch="getData"
        :form-options="formOptions"
        :page-sizes="[20, 50, 100]"
        height="300"
        list-field="records"
        method="get"
        page-index-key="page"
        page-size-key="pageSize"
        total-field="totalElements"
        type="remote">
      <template #button>
        <div>
          <el-button icon="el-icon-circle-plus" size="mini" type="primary" @click="handleAdd">新建活动</el-button>
          <el-button icon="el-icon-circle-plus" size="mini" type="primary" @click="handleCredit">信用卡支付优惠
          </el-button>
        </div>
      </template>
      <el-table-column slot="append" label="操作" width="240" fixed="right">
        <template slot-scope="scope">
          <el-button plain size="mini" type="primary" @click="handlePreview(scope.row.id)">预览</el-button>
          <el-button v-if="scope.row.status!='end'"
                     plain size="mini" type="primary" @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-button v-if="scope.row.status=='ing'"
                     plain size="mini" type="primary" @click="handleEnd(scope.row.id)">
            结束
          </el-button>
          <el-button v-if="scope.row.status=='not_start'"
                     plain size="mini" type="danger" @click="handleDel(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
      <template slot="reduceName" slot-scope="scope">
        <span @click="handleDetail(scope.row.id)" style="color: #409EFF">
            {{ scope.row.name }}
        </span>
      </template>
      <template slot="timeRange" slot-scope="scope">
        {{
          scope.row.startTime|utcFormat('YYYY-MM-DD HH:mm:ss', timeZone)
        }} ~ <span v-if="scope.row.endTime==undefined">永不过期</span>
        <span v-if="scope.row.endTime!=undefined">
          {{ scope.row.endTime|utcFormat('YYYY-MM-DD HH:mm:ss', timeZone) }}
        </span>
      </template>
      <template slot="reduceRules" slot-scope="scope">
        <span v-html="scope.row.reduceRule"/>
      </template>
      <template slot="statusText" slot-scope="scope">
        <span v-if="scope.row.status=='not_start'" style="color: rgb(255,153,0)">{{scope.row.statusText}}</span>
        <span v-if="scope.row.status=='ing'"style="color: rgb(0,128,0)">{{scope.row.statusText}}</span>
        <span v-if="scope.row.status=='end'"style="color: rgb(153,153,153)">{{scope.row.statusText}}</span>
        <span v-if="scope.row.status=='pause'"style="color: rgb(255,0,0)">{{scope.row.statusText}}</span>
      </template>
    </table-pagination>
  </div>
</template>

<script>
import TablePagination from '_c/Tables/table-pagination';
import {getPriceReducePage, deletePriceReduce, endPriceReduce} from '@/api/priceReduce';
import {mapGetters} from 'vuex';

export default {
    name: 'price-reduce',
    components: {TablePagination},
    data () {
        return {
            siteDomain: '',
            fixOption: {fixedHeader: true},
            pageParams: {
                page: 1,
                pageSize: 20,
                name: '',
                status: ''
            },
            formOptions: {
                showResetBtn: true,
                showSearchBtn: true,
                inline: false,
                labelWidth: 120,
                submitBtnText: '查询',
                size: 'small',
                resetBtnCallback: () => {
                    this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
                },
                forms: [
                    {prop: 'name', label: '活动名称：', placeholder: '请输入活动名称'},
                    {
                        prop: 'status',
                        label: '活动状态：',
                        itemType: 'select',
                        placeholder: '请选择状态',
                        selectFetch: () => {
                            return new Promise((resolve, reject) => {
                                resolve(this.statusList);
                            });
                        }
                    }
                ]
            },
            columns: [
                {label: '活动名称', slotName: 'reduceName', showOverflowTooltip: true},
                {label: '适用商品', prop: 'reduceGoods', width: 200},
                {label: '优惠规则', slotName: 'reduceRules', width: 180, showOverflowTooltip: true},
                {label: '有效日期', slotName: 'timeRange', width: 400, showOverflowTooltip: true},
                {label: '状态', slotName: 'statusText', width: 100}
            ],
            statusList: [
                {'label': '全部', 'value': ''},
                {'label': '未开始', 'value': 'not_start'},
                {'label': '进行中', 'value': 'ing'},
                {'label': '已结束', 'value': 'end'}
            ]
        };
    },
    mounted () {
    },
    methods: {
        getData (params) {
            params.siteId = this.siteId;
            return new Promise((resolve, reject) => {
                getPriceReducePage(params).then((res) => {
                    resolve(res);
                });
            });
        },
        handleSearch () {
            this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
        },
        // 新建活动
        handleAdd () {
            this.$router.push({name: 'price-reduce-add'});
        },
        handleCredit () {
            this.$router.push({name: 'price-credit-discount'});
        },
        handleEdit (id) {
            this.$router.push({name: 'price-reduce-edit', params: {id}});
        },
        handleDel (id) {
            this.$confirm('此操作将删除活动, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deletePriceReduce(id).then(res => {
                    this.$message.success('删除成功');
                    this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
                });
            }).catch(() => {
                this.$message({type: 'info', message: '已取消操作'});
            });
        },
        handleEnd (id) {
            this.$confirm('此操作将结束活动, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                endPriceReduce(id).then(res => {
                    this.$message.success('结束成功');
                    this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
                });
            }).catch(() => {
                this.$message({type: 'info', message: '已取消操作'});
            });
        },
        handlePreview (id) {
            let url = 'https://' + this.siteInfo.domainName + '/rebate/' + id + '?type=PRICE_REDUCE';
            window.open(url, '_blank');
        },
        handleDetail (id) {
            console.log(id);
            this.$router.push({name: 'price-reduce-detail', params: {id}});
        }
    },
    computed: {
        ...mapGetters(['timeZone', 'siteList']),
        siteId () {
            return this.$store.state.user.siteId;
        },
        siteInfo () {
            let info = this.siteList.find(res => res.id === Number(this.siteId));
            return info;
        }
    }
}
;
</script>

<style lang="scss" scoped>
.search-list {
  h4 {
    border-bottom: 1px solid #E8E8E8;
    margin: 0;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
}
</style>
